<template>
  <div>
    <a-table :columns="columns"
             :data-source="data"
             bordered>

    </a-table>
  </div>
</template>
<script>
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];


export default {
  name: "news",

  data () {
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        customRender: (text, row, index) => {
          if (index < 4) {
            return <a href="javascript:;">{text}</a>;
          }
          return {
            children: <a href="javascript:;">{text}</a>,
            attrs: {
              colSpan: 5,
            },
          };
        },
      },
      {
        title: 'Age',
        dataIndex: 'age',
      },
      {
        title: 'Home phone',
        colSpan: 2,
        dataIndex: 'tel',
        customRender: (value, row, index) => {
          console.log(value, row, index)
          // const obj = {
          //   children: value,
          //   attrs: {},
          // };
          // if (index === 2) {
          //   obj.attrs.rowSpan = 2;
          // }
          // if (index == 0) {
          //   return (
          //     <div>
          //       <a-button>{value}</a-button>
          //     </div>
          //   )
          // }
          // // These two are merged into above cell
          // if (index === 3) {
          //   obj.attrs.rowSpan = 0;
          // }
          // if (index === 4) {
          //   obj.attrs.colSpan = 0;
          // }
          return (
            <div>
              <a-button>{value}</a-button>
            </div>
          );
        },
      },
      {
        title: 'Phone',
        colSpan: 0,
        dataIndex: 'phone',

      },
      {
        title: 'Address',
        dataIndex: 'address',
      },
    ]

    return {
      columns: columns,
      data: data
    }
  }
}
</script>
<style lang="less">
</style>